Toast提示
toast 修饰器用于在视图上显示一个临时提示框（Toast）。
它通常用于短暂地展示消息或反馈信息，例如“保存成功”、“操作完成”、“网络错误”等。
Toast 可以包含简单的文本消息，也可以自定义内容视图。
你可以控制其显示位置、持续时间、背景颜色、圆角、阴影等外观属性。
类型定义
1toast?: {
2 duration?: number | null
3 position?: "top" | "bottom" | "center"
4 backgroundColor?: Color | null
5 textColor?: Color | null
6 cornerRadius?: number | null
7 shadowRadius?: number | null
8} & (
9 | { message: string; content?: never }
10 | { message?: never; content: VirtualNode }
11) & ({
12 isPresented: boolean
13 onChanged: (isPresented: boolean) => void
14} | {
15 isPresented: Observable<boolean>
16})
属性说明
isPresented: boolean 和 onChanged(isPresented: boolean): void
说明：
使用isPresented和onChanged来控制Toast的显示和隐藏。
示例：
1const [showToast, setShowToast] = useState(false)
2
3toast={{
4 isPresented: showToast,
5 onChanged: setShowToast,
6 message: "Saved successfully"
7}}
isPresented: Observable<boolean>
说明：使用 isPresented 作为 Observable 来控制 Toast 的显示和隐藏。
示例：
1const showToast = useObservable(false)
2
3toast={{
4 isPresented: showToast,
5 message: "Saved successfully"
6}}
7
8---
9
10### `duration?: number | null`
11
12**说明**：
13Toast 显示的持续时间（单位：秒）。
14默认值为 `2` 秒。
15
16**示例**：
17
18```tsx
19toast={{
20 isPresented: showToast,
21 onChanged: setShowToast,
22 duration: 3,
23 message: "Action completed"
24}}
position?: "top" | "bottom" | "center"
说明：
控制 Toast 在屏幕上的显示位置。
可选值：
"top"：顶部显示"bottom"：底部显示（默认）"center"：居中显示
示例：
1toast={{
2 isPresented: showToast,
3 onChanged: setShowToast,
4 position: "top",
5 message: "New message received"
6}}
backgroundColor?: Color | null
说明：
设置 Toast 的背景颜色。可以使用任意支持的 Color 类型。
示例：
1toast={{
2 isPresented: showToast,
3 onChanged: setShowToast,
4 backgroundColor: "blue",
5 message: "Upload successful"
6}}
textColor?: Color | null
说明：
设置 Toast 文本的颜色。
示例：
1toast={{
2 isPresented: showToast,
3 onChanged: setShowToast,
4 textColor: "white",
5 message: "Download failed"
6}}
cornerRadius?: number | null
说明：
设置 Toast 的圆角大小。
默认值为 16。
示例：
1toast={{
2 isPresented: showToast,
3 onChanged: setShowToast,
4 cornerRadius: 8,
5 message: "Item added"
6}}
shadowRadius?: number | null
说明：
设置阴影的模糊半径。
默认值为 4。
示例：
1toast={{
2 isPresented: showToast,
3 onChanged: setShowToast,
4 shadowRadius: 6,
5 message: "Success"
6}}
显示文本消息
示例：
1function View() {
2 const [showToast, setShowToast] = useState(false)
3
4 return (
5 <List
6 toast={{
7 isPresented: showToast,
8 onChanged: setShowToast,
9 message: "Data saved successfully",
10 duration: 2,
11 position: "bottom",
12 backgroundColor: "green",
13 textColor: "white"
14 }}
15 >
16 <Button
17 title="Save"
18 action={() => setShowToast(true)}
19 />
20 </List>
21 )
22}
该示例中，当点击按钮后，会在底部显示一个绿色背景的提示“Data saved successfully”，持续 2 秒后自动消失。
显示自定义内容
说明：
除了简单文本，你还可以传入一个 VirtualNode 来自定义 Toast 的内容，例如包含图标、布局或按钮的自定义组件。
示例：
1function View() {
2 const [showToast, setShowToast] = useState(false)
3
4 return (
5 <List
6 toast={{
7 isPresented: showToast,
8 onChanged: setShowToast,
9 content: (
10 <HStack spacing={8}>
11 <Image systemName="checkmark.circle.fill" />
12 <Text foregroundStyle="white">Upload Complete</Text>
13 </HStack>
14 ),
15 backgroundColor: "black",
16 cornerRadius: 12
17 }}
18 >
19 <Button
20 title="Show Toast"
21 action={() => setShowToast(true)}
22 />
23 </List>
24 )
25}
该示例展示了一个包含图标与文本的自定义 Toast。
使用建议
-
保持状态同步：
isPresented 必须与 onChanged 回调保持同步，否则 Toast 无法正确关闭。
-
简洁提示：
Toast 应用于短暂、轻量级的信息提示，而非需要交互的复杂内容。
-
避免同时显示多个 Toast：
屏幕上同时出现多个 Toast 可能造成用户困惑。
-
可组合使用：
你可以与 Button、List 等组件配合使用，用于即时反馈用户操作。
